<div class="row">
  <div class="text-center">
    <b class="text-red">将右边机柜号拖拽到下面相应单元格中</b>
  </div>
  <div class="col-md-10">
  <table class="table table-condensed table-bordered" nowarp="nowarp" width="100%" id="zonemap_detail">
      <tbody>
      {%for cell in cells%}{%if forloop.counter0 == cell.row%}<tr>{%endif%}{%if cell.rack_id%}
      <td data-pk="{{cell.id}}" data-col="{{cell.col}}" data-row="{{cell.row}}" data-flag="left_false"
      width="{% widthratio 90 max_col|add:1 1 %}%" draggable="true"
      class="badge bg-{{cell.rack.status.color}}" data-rackid="{{cell.rack_id}}">{{cell.rack.name}}</td>
      {%else%}
      <td data-pk="{{cell.id}}" data-col="{{cell.col}}" data-row="{{cell.row}}" data-flag="left_true"
      width="{% widthratio 90 max_col|add:1 1 %}%"
      class="badge text-black">{{cell.row}} x {{cell.col}}</td>
      {%endif%}{%if cell.col == max_col%}</tr>{%endif%}{%endfor%}
      </tbody>
  </table>
  </div>
  <div class="clearfix visible-sm-block"></div>
  {% csrf_token %}
  <div class="col-md-2">
     <div class="">
      <table id="rackswap" class="table table-condensed table-bordered" nowarp="nowarp">
          <thead><tr class="active"><th>{%if rackswap%}以下机柜可拖拽:{%else%}区域没有可分配的机柜{%endif%}</th></tr></thead>
          <tbody>
          {%for obj in rackswap%}
          <tr><td data-flag="right_true" data-rackid="{{obj.pk}}" class="badge bg-{{obj.status.color}}" draggable="true">{{obj.name}}</td></tr>
          {%endfor%}
          </tbody>
      </table>
     </div>
  </div>
  </div>
